<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>收货地址</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/icons/iconfont.css" />
    <link rel="stylesheet" href="../css/head.css" />
    <link rel="stylesheet" href="../css/footer.css" />
    <link rel="stylesheet" href="../css/backStageMenu.css" />
    <link rel="stylesheet" href="../css/recAddress.css" />
    <link rel="stylesheet" href="../css/city-picker.css" />
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="logo">
            <a href="../index.html"><img src="../images/logo.png" alt="我要去印"></a>
        </div>
        <div class="iconmenu">
            <input type="text" value="" placeholder="搜索">
            <i class="iconfont icon-sousuo"></i>
        </div>
        <div class="message">
            <i class="iconfont icon-xiaoxi"></i>
            <p>12</p>
        </div>
        <div class="user-info">
            <img src="../images/menuUserinfoHeadkey.jpg" alt="">
            <div class="triangle-bottom"></div>
            <div class="all-info">
                <p><i class="iconfont icon-zhuye"></i>我的主页</p>
                <p><i class="iconfont icon-dingdan"></i>我的订单</p>
                <p><i class="iconfont icon-tuichu"></i>退出</p>
            </div>
        </div>
    </header>
    <div class="main clearfix">
        <div class="menu fl">
            <div class="menu-userinfo">
                <img src="../images/menuUserinfoHeadkey.jpg" />

                <div class="menu-userinfo-phone">18634523418</div>
            </div>
            <div class="menu-myTemplate">
                <div class="menu-inner-rule">
                    <li class="iconfont icon-dingdan"></li>
                    <div>制卡项目</div>
                </div>
                <div id="myLikeTemplate" class="menu-inner-rule">
                    <li class="iconfont icon-xihuan"></li>
                    <div>我喜欢的模板</div>
                </div>
                <div id="myPurchaseTemplate" class="menu-inner-rule">
                    <li class="iconfont icon-yigoumoban"></li>
                    <div>我购买的模板</div>
                </div>
            </div>
            <div class="menu-orderInfo">
                <div id="myOrderList" class="menu-inner-rule">
                    <li class="iconfont icon-dingdan1"></li>
                    <div>我的订单</div>
                </div>
                <div id="personalInfo" class="menu-inner-rule">
                    <li class="iconfont icon-renyuanxinxi"></li>
                    <div>人员信息</div>
                </div>
                <div id="recAddress" class="menu-inner-rule menu-inner-rule-on">
                    <li class="iconfont icon-dizhi"></li>
                    <div>收货地址</div>
                </div>
            </div>
            <div class="menu-personal-data">
                <div id="userInfo" class="menu-inner-rule">
                    <li class="iconfont icon-bianji"></li>
                    <div>个人资料</div>
                </div>
            </div>
        </div>
        <div class="content fl">
            <div class="recAddressTitle">收货地址</div>
            <div class="recAddressList">
                <div class="addAddress-statisic">
                    <button id="addAddress"><span>+</span>新增收货地址</button>
                    <span>您已创建<span id="yetAddress">4</span>个收货地址，最多可创建<span id="allAddressNumber">20</span>个</span>
                </div>

                <!--没有数据的情况，用这行代码，然后把下面那个div设置为display:none，或者直接去掉-->
                <!--<iframe style="width: 960px;height: 515px;border: none;overflow: hidden;" src="empty-data.html"></iframe>-->
                <div class="addressList clearfix">
                    <div class="addressRule fl">
                        <div class="addressTop"></div>
                        <div class="addressInfo">
                            <div>
                                <span class="addressKey">收货人：</span>
                                <span class="addressValue">刘宝</span>
                                <span class="defaultAddress">默认地址</span>
                            </div>
                            <div>
                                <span class="addressKey">所在地区：</span>
                                <span class="addressValue">广东省广州市海珠区城区</span>
                            </div>
                            <div>
                                <span class="addressKey">详细地址：</span>
                                <span class="addressValue">新滘西路300号波涛大厦</span>
                            </div>
                            <div>
                                <span class="addressKey">手机号码：</span>
                                <span class="addressValue">134235354667</span>
                            </div>
                            <div>
                                <span class="addressKey">邮编：</span>
                                <span class="addressValue">510000</span>
                            </div>
                        </div>
                        <div class="addressOperate clearfix">
                            <!-- <span class="radioSpan radioOn fl">
                             <input type="radio" checked="checked" name="setdefaultaddress" value="1" class="radioClass">
                           </span> -->
                            <span class="radioSpan fl">
                             <span class="radio"></span>
                            </span>
                            <div class="defaultFont fl">设为默认地址</div>
                            <div class="fr edit-delete">
                                <a href="#">编辑</a>
                                <span>|</span>
                                <a class="showDeleteAlert" href="#">删除</a>
                            </div>
                        </div>
                    </div>
                    <div class="addressRule fl">
                        <div class="addressTop"></div>
                        <div class="addressInfo">
                            <div>
                                <span class="addressKey">收货人：</span>
                                <span class="addressValue">刘宝</span>
                            </div>
                            <div>
                                <span class="addressKey">所在地区：</span>
                                <span class="addressValue">广东省广州市海珠区城区</span>
                            </div>
                            <div>
                                <span class="addressKey">详细地址：</span>
                                <span class="addressValue">新滘西路300号波涛大厦</span>
                            </div>
                            <div>
                                <span class="addressKey">手机号码：</span>
                                <span class="addressValue">134235354667</span>
                            </div>
                            <div>
                                <span class="addressKey">邮编：</span>
                                <span class="addressValue">510000</span>
                            </div>
                        </div>
                        <div class="addressOperate clearfix">
                            <span class="radioSpan fl">
                                <span class="radio"></span>
                            </span>

                            <div class="defaultFont fl">设为默认地址</div>
                            <div class="fr edit-delete">
                                <a href="#">编辑</a>
                                <span>|</span>
                                <a class="showDeleteAlert" href="#">删除</a>
                            </div>
                        </div>
                    </div>
                    <div class="addressRule fl">
                        <div class="addressTop"></div>
                        <div class="addressInfo">
                            <div>
                                <span class="addressKey">收货人：</span>
                                <span class="addressValue">刘宝</span>
                            </div>
                            <div>
                                <span class="addressKey">所在地区：</span>
                                <span class="addressValue">广东省广州市海珠区城区</span>
                            </div>
                            <div>
                                <span class="addressKey">详细地址：</span>
                                <span class="addressValue">新滘西路300号波涛大厦</span>
                            </div>
                            <div>
                                <span class="addressKey">手机号码：</span>
                                <span class="addressValue">134235354667</span>
                            </div>
                            <div>
                                <span class="addressKey">邮编：</span>
                                <span class="addressValue">510000</span>
                            </div>
                        </div>
                        <div class="addressOperate clearfix">
                            <span class="radioSpan fl">
                                <span class="radio"></span>
                            </span>

                            <div class="defaultFont fl">设为默认地址</div>
                            <div class="fr edit-delete">
                                <a href="#">编辑</a>
                                <span>|</span>
                                <a class="showDeleteAlert" href="#">删除</a>
                            </div>
                        </div>
                    </div>
                    <div class="addressRule fl">
                        <div class="addressTop"></div>
                        <div class="addressInfo">
                            <div>
                                <span class="addressKey">收货人：</span>
                                <span class="addressValue">刘宝</span>
                            </div>
                            <div>
                                <span class="addressKey">所在地区：</span>
                                <span class="addressValue">广东省广州市海珠区城区</span>
                            </div>
                            <div>
                                <span class="addressKey">详细地址：</span>
                                <span class="addressValue">新滘西路300号波涛大厦</span>
                            </div>
                            <div>
                                <span class="addressKey">手机号码：</span>
                                <span class="addressValue">134235354667</span>
                            </div>
                            <div>
                                <span class="addressKey">邮编：</span>
                                <span class="addressValue">510000</span>
                            </div>
                        </div>
                        <div class="addressOperate clearfix">
                            <span class="radioSpan fl">
                                <span class="radio"></span>
                            </span>

                            <div class="defaultFont fl">设为默认地址</div>
                            <div class="fr edit-delete">
                                <a href="#">编辑</a>
                                <span>|</span>
                                <a class="showDeleteAlert" href="#">删除</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="wqb">
            <img src="../images/weixin.jpg" alt="">
            <img src="../images/weibo.jpg" alt="">
            <img src="../images/qq.jpg" alt="">
        </div>
        <div class="footer-info">
            <ul class="clearfix">
                <li><a href="javascript:void(0)">关于我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">联系我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">加入我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">商务合作</a></li>
            </ul>
            <p>版权所有&nbsp©&nbsp京ICP备14007358号-1 / 京公网安备11010802014104号</p>
        </div>
        <div class="erweima"><img src="../images/erweima.jpg" alt=""></div>
    </footer>
    <div class="addAddressBg" style="display: none;">
        <div class="addAddressAlert">
            <div class="alertTitle">新增收货地址</div>
            <form class="addAddressForm" action="" method="post">
                <div>
                    <span class="addressKey"><span>*</span>收货人</span>
                    <input type="text" class="addressValue" placeholder="请选择收货人" />
                </div>
                <div>
                    <span class="addressKey"><span>*</span>所在地区</span>
                    <input readonly id="addressInput" type="text" class="addressValue" placeholder="请选择省市区" style="position: relative;" />
                    <div class="city-picker-selector" id="city-picker-selector" style="display: none;">
                        <div class="selector-item storey province">
                            <a href="javascript:;" class="selector-name reveal">北京市</a>
                            <input type="hidden" name="userProvinceId" class="input-price val-error" value="110000" data-required="userProvinceId">
                            <div class="selector-list listing hide">
                                <ul>
                                    <li>北京市</li>
                                    <li>天津市</li>
                                    <li>河北省</li>
                                    <li>山西省</li>
                                </ul>
                            </div>
                        </div>
                        <div class="selector-item storey city">
                            <a href="javascript:;" class="selector-name reveal">北京市</a>
                            <input type="hidden" name="userCityId" class="input-price val-error" value="110100" data-required="userCityId">
                            <div class="selector-list listing hide">
                                <ul>
                                    <li>北京市</li>
                                </ul>
                            </div>
                        </div>
                        <div class="selector-item storey district">
                            <a href="javascript:;" class="selector-name reveal">海淀区</a>
                            <input type="hidden" name="userDistrictId" class="input-price val-error" value="110108" data-required="userDistrictId">
                            <div class="selector-list listing hide">
                                <ul>
                                    <li>东城区</li>
                                    <li>西城区</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- end .city-picker-selector -->
                </div>
                <div>
                    <span class="addressKey"><span>*</span>详细地址</span>
                    <input type="text" class="addressValue" placeholder="请输入街道名称、门牌号、楼层等" />
                </div>
                <div class="addressPhone">
                    <span class="addressKey"><span>*</span>联系方式</span>
                    <input id="addressPhone1" type="text" class="addressValue" placeholder="手机号码" />
                    <span>或</span>
                    <input id="addressPhone2" type="text" class="addressValue" placeholder="固定电话" />
                </div>
                <div class="saveAddress">
                    <input type="submit" value="保存收货地址" />
                </div>
            </form>
        </div>
    </div>
    <div class="addAddressBg" style="display: none;">
        <div class="deleteAlert">
            <div class="deleteTitle">确定删除收货地址？</div>
            <div class="deleteBtn">
                <button id="deleteCancel">取消</button>
                <button id="deleteSure">确定</button>
            </div>
        </div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/citydata.min.js"></script>
    <script type="text/javascript" src="../js/cityPicker-1.1.5.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var province = "";
            var city = "";
            var district = "";
            var address = "";

            $(".addAddressBg").click(function () {
                var inputValue = document.querySelectorAll(".addAddressForm>div>input");
                for (var i = 0; i < inputValue.length - 1; i++) {
                    inputValue[i].value = '';
                }
                $(".addAddressBg").hide();
                $('#city-picker-selector').css("display", "none");
            })
            $("#addAddress").click(function () {
                document.querySelector(".addAddressBg").style.display = 'block';
            })

            /*阻止事件冒泡*/
            function stopPropagation(e) {
                e = e || window.event;
                if (e.stopPropagation) { //W3C阻止冒泡方法
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true; //IE阻止冒泡方法
                }
            }

            $(".addAddressBg *").click(function (e) {
                stopPropagation(e);
            })

            $(
                ".addAddressAlert,.addAddressAlert>*,.addAddressAlert>form>div,.addAddressAlert>form>div>span,.addAddressAlert>form>div>input"
            ).click(function () {
                $('#city-picker-selector').css("display", "none");
            });

            $("#addressInput").click(function () {
                $('#city-picker-selector').css("display", "block");
            });

            $(".showDeleteAlert").click(function () {
                $(".addAddressBg").eq(1).show();
                return false;
            })

            $("#deleteCancel").click(function () {
                $(".addAddressBg").hide();
            })

            //模拟城市-无联动/无搜索
            var selector = $('#city-picker-selector').cityPicker({
                dataJson: cityData,
                renderMode: true,
                search: false,
                autoSelected: false,
                onForbid: function () {
                    console.log(this)
                }
            });

            // 省份选择的回调
            $('#city-picker-selector').on('choose-province.citypicker', function (event, tagert, values) {
                province = values.name;
            });

            // 城市选择的回调
            $('#city-picker-selector').on('choose-city.citypicker', function (event, tagert, values) {
                city = values.name;
            });

            // 城市选择的回调
            $('#city-picker-selector').on('choose-district.citypicker', function (event, tagert, values) {
                if (values.id != 0) {
                    district = values.name;
                    address = province + "/" + city + "/" + district;
                    $('#city-picker-selector').css("display", "none");
                    $("#addressInput").val(address);
                }
            });

            $("#myOrderList").click(function () {
                location.href = 'myOrderList.html';
            })
            $("#personalInfo").click(function () {
                location.href = 'personalInfo.html';
            })
            $("#recAddress").click(function () {
                location.href = 'recAddress.html';
            })
            $("#userInfo").click(function () {
                location.href = 'userInfo.html';
            })
            $("#myPurchaseTemplate").click(function () {
                location.href = 'myPurchaseTemplate.html';
            })
            $("#myLikeTemplate").click(function () {
                location.href = 'myLikeTemplate.html';
            })
            // 用户头像点击事件
            $('.user-info').mouseover(function () {
                $('.user-info .all-info').stop().slideDown();
            })
            $('.user-info').mouseout(function () {
                $('.user-info .all-info').stop().slideUp();
            })
            // 默认收货按钮
            $('.radioSpan').click(function () {
                $('.radio').css('display', 'none')
                $(this).children().css('display', 'block')
            })
        })
         
    </script>
</body>

</html>